import style from "./style.less"
import * as React from "react"
import { RouteComponentProps, Link, withRouter } from "react-router-dom"
import { ISku } from "../../types"

interface Props {
  sku: ISku
}

class ProductItem extends React.Component<Props & RouteComponentProps> {
  render() {
    return (
      <Link to={"/detail/" + this.props.sku.id} className={style.ProductItem}>
        <img src={this.props.sku.cover} className={style.cover} />

        <div className={style.ProductItemBottom}>
          <div className={style.ProductItemTitle}>{this.props.sku.title}</div>
          <div className={style.ProductItemPrice}>￥{this.props.sku.price}</div>
        </div>
      </Link>
    )
  }
}

export default withRouter(ProductItem)
